<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	#d0,p {
		border: 1px solid red;
		width: 400px;
	}
	#d0 div {
		width: 100px;
		height: 100px;
		margin: 10px;
	}
	#d1 {
		background-color: red;
	}
	#d2 {
		background-color: green;
	}
	#d3 {
		background-color: blue;
	}
	/*浮动*/
	#d1,#d2,#d3 {
		float: left;
	}
	/*消除对叔叔的浮动影响*/
	p {
		/*clear: left;*/
	}
	/*消除对父亲的浮动影响*/
	#d0 #d4 {
		width: 0;
		height: 0;
		clear: left;
	}
</style>
</head>
<body>
	<div id="d0">
		<div id="d1"></div>
		<div id="d2"></div>
		<div id="d3"></div>
		<!-- 用来消除浮动影响 -->
		<div id="d4"></div>
	</div>
	<p>浮动时看看我在哪</p>
</body>
</html>








